<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tools</title>
  <style>
    * { margin: 0; padding: 0; }
    .wrap {
      width: 100%;
      height: 100vh;
      background-color: #ccc;
    }
    .abc {
      padding: 50px;
    }
    .box {
      background-color: pink;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="abc">
      <div id="btn1" class="box"></div>
    </div>
    <div class="loding-wrap">
    </div>
  </div>
</body>
<script>
  let btn1 = document.getElementById('btn1')

  // 防抖
  function debounce(fn, delay) {
    let timer
    return (...args) => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }

  // 节流
  function throttle(fn, delay) {
    let last = 0
    return (...args) => {
      const now = Date.now()
      if (now - last > delay) {
        last = now
        fn.apply(this, args)
      }
    }
  }


  const task =  function() {
    console.log('run task')
  }
  const debounceTask = throttle(task, 1000)

  btn1.addEventListener('click', debounceTask)

  // 深层考培
  function deepClone(obj, cache = new WeakMap()) {
    if (obj === null || typeof obj !== 'object') return obj
    if (obj instanceof Date) return new Date(obj)
    if (obj instanceof RegExp) return new RegExp(obj)

    if (cache.get(obj)) return cache.get(obj)
    let cloneObj = new obj.constructor()
    cache.set(obj, cloneObj)

    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        cloneObj[key] = deepClone(obj[key], cache)
      }
    }
    return cloneObj
  }
  const obj = { name: 'Jack', address: { x: 100, y: 200 }, list: [1, 2, 3] }
  // obj.a = obj
  const newObj = deepClone(obj)
  console.log(newObj)
  console.log(newObj.list === obj.list)
</script>
</html>